<template>
    <div>
        <h3>企业名称：{{$route.params.company_name}}</h3><br>
        <Button type="info">总数量：{{this.$route.params.count}}</Button>&nbsp;&nbsp;&nbsp;
        <Button type="warning">剩余数量：{{this.$route.params.res_count}}</Button>&nbsp;&nbsp;&nbsp;
        <Button type="primary">总请求数量：{{statistics.allcount}}</Button>&nbsp;&nbsp;&nbsp;
        <Button type="success">请求成功数量：{{statistics.allsuccesscount}}</Button>&nbsp;&nbsp;&nbsp;
        <Button type="error">请求失败数量：{{statistics.allfailscount}}</Button>
        <div style="text-align: right">
            <Button type="primary" v-on:click="path()">返回</Button>
        </div>
        <Tabs value="name1">
            <TabPane label="充值统计" name="name1">
                <Table stripe :columns="columns2" :data="data2" :loading="spinShow"></Table>
                <br>
                <div style="text-align: right">
                    <Page show-total show-elevator :total="page2.totalRecord" @on-change="change2"/>
                </div>
            </TabPane>
            <TabPane label="访问列表" name="name2">
                <Table stripe :columns="columns1" :data="data1" :loading="spinShow" ></Table>
                <br>
                <div style="text-align: right">
                    <Page show-total show-elevator :total="page1.totalRecord" @on-change="change"/>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
import { getStatistics, getVisitList, getUserChargeList } from '@/api/registered/ocr'

export default {
  name: 'idnex',
  data () {
    return {
      // 数据加载
      spinShow: true,
      // 统计：总数/成功/失败
      statistics: {
        allcount: '',
        allsuccesscount: '',
        allfailscount: ''
      },
      columns1: [
        {
          title: '状态',
          key: 'rtncode',
          width: 120,
          render: (h, params) => {
            const row = params.row
            const color = row.rtncode === '1' ? 'success' : 'error'
            const text = row.rtncode === '1' ? '成功' : '失败'
            return h('Tag', {
              props: {
                type: 'dot',
                color: color
              }
            }, text)
          }
        },
        {
          title: '时间',
          key: 'create_date',
          width: 100

        },
        {
          title: 'fullreq',
          key: 'fullreq'
        }
      ],
      columns2: [
        {
          title: '公司名称',
          key: 'company_name'
        },
        {
          title: '公司电话',
          key: 'company_mobile'
        },
        {
          title: '联系人',
          key: 'conn_username'
        },
        {
          title: '联系人电话',
          key: 'conn_usermobile'
        },
        {
          title: '时间',
          key: 'create_date'
        },
        {
          title: '是否充值',
          key: 'isinvest',
          render: (h, params) => {
            const row = params.row
            const color = row.isinvest === '0' ? 'error' : 'success'
            const text = row.isinvest === '0' ? '未充值' : '已充值'
            return h('Tag', {
              props: {
                type: 'dot',
                color: color
              }
            }, text)
          }
        },
        {
          title: '套餐',
          key: 'meal'

        },
        {
          title: '套餐金额',
          key: 'pay_fee'
          // render: (h, params) => {
          //   let newPay = params.row.pay_fee
          //   return h(newPay)
          // }
        },
        {
          title: '套餐次数',
          key: 'count'
        }
      ],
      // 访问列表
      data1: [],
      // 充值列表
      data2: [],
      /* 分页开始 */
      page1: {
        // 总条数
        totalRecord: 0,
        // 第几页
        pageNo: 1
        // 选择第几页，谁便给默认值
        /* 分页结束 */
      },
      page2: {
        // 调接口后返回的数据每页10条数据切割
        pageData: [],
        // 总条数
        totalRecord: 0,
        // 总页数
        totalPage: 1,
        // 一页显示多少条数据,默认是10条，不用给page标签设置
        pageSize: 10,
        // 第几页
        pageNo: 1
        // 选择第几页，谁便给默认值
        /* 分页结束 */
      },
      params: {
        userid: this.$route.params.userid,
        pageno: 1
      }
    }
  },
  mounted () {
    // 获取统计数量
    getStatistics(this.$route.params.userid).then(ret => {
      if (ret.data.errcode === 1001) {
        this.statistics.allcount = ret.data.data.allcount
        this.statistics.allsuccesscount = ret.data.data.allsuccesscount
        this.statistics.allfailscount = ret.data.data.allfailscount
        this.spinShow = false
      } else {
        this.warning()
      }
    })
    // 获取访问列表
    getVisitList(this.params).then(ret => {
      if (ret.data.errcode === 1001) {
        this.data1 = ret.data.data.results
        this.page1.totalRecord = ret.data.data.totalRecord
        this.spinShow = false
      } else {
        this.warning()
        this.spinShow = false
      }
    })
    // 获取充值列表
    getUserChargeList(this.$route.params.userid).then(ret => {
      if (ret.data.errcode === 1001) {
        // 一共多少条数据，在分页出展示一下
        this.page2.totalRecord = ret.data.data.length
        // 获取后台用户列表数据,根据后台数据的条数和每页显示数量算出一共几页,得0时设为1
        this.page2.pageNo = Math.ceil(ret.data.data.length / this.page2.pageSize) || 1
        for (let i = 0; i < this.page2.pageNo; i++) {
          // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
          // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5(对slice操作来说是0-5)条，第二页是6-10(对slice操作来说是5-10)条...
          this.page2.pageData[i] = ret.data.data.slice(this.page2.pageSize * i, this.page2.pageSize * (i + 1))
          // 默认显示第一页
        }
        this.data2 = this.page2.pageData[0]
        // 关闭加载动画
        this.spinShow = false
      } else {
        this.spinShow = false
        this.warning()
      }
    })
  },
  methods: {
    // 访问列表点击页码加载数据
    change (pageno) {
      this.params.pageno = pageno
      this.spinShow = true
      getVisitList(this.params).then(ret => {
        if (ret.data.errcode === 1001) {
          this.data1 = ret.data.data.results
          this.spinShow = false
        } else {
          this.spinShow = false
          this.warning()
        }
      })
    },
    // 充值列表点击跳页加载数据
    change2 (pageno) {
      this.data2 = this.page2.pageData[pageno - 1]
    },
    // 提示信息
    success () {
      this.$Message.success('成功')
    },
    warning () {
      this.$Message.warning('数据加载失败')
    },
    path () {
      this.$router.push({ name: 'userList' })
    }

  }
}
</script>

<style scoped>

</style>
